<template>
  <div id="app">
    <div class="body" style="height: height;">
      <!-- <transition :name="animateName"> -->
      <router-view />
      <!-- </transition> -->
    </div>
  </div>
</template>

<script>

  export default {
    name: "App",
    data() {
      return {
        height: this.$height,
        tabBars: [
          { className: "icon-changyonglogo40", title: "外卖", path: { name: 'Swiper' } },
          { className: "icon-faxian1", title: "搜索", path: { name: 'About' } },
          { className: "icon-weibiaoti-", title: "订单", path: { name: 'About' } },
          { className: "icon-wode", title: "我的", path: { name: "Mine" } },
        ],
        animateName: "push",
        cityName: "",
        shopName: "",
      }
    },
  }
</script>

<style lang="less" scoped>
  .push-enter,
  .pop-leave-to {
    transform: translateX(-100%);
  }

  .body {
    overflow: scroll;
  }

  .push-enter-active,
  .push-leave-active,
  .pop-enter-active,
  .pop-leave-active {
    width: 100%;
    transition: all 0.5s linear;
    position: absolute;
    top: 44px;
    /*no*/
  }

  .push-leave-to,
  .pop-enter {
    transform: translateX(-100%);
  }
</style>